<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-05-15
 * Time: 11:14
 */
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><?= \common\services\DomainExtraConfigService::getVal('name');?>-注册账号</title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
</head>

<body id="app">
<?=Html::cssFile('@web/static/css/index.css')?>
<?php echo $this->render('../public/ele.php');?>
<!--引入页面头部-->
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>
<div class="userbg">
<div class="container" id="registerBox">
    <template>
        <el-container v-loading="loginLoading">
            <el-main>
                <p style="text-align:center;"><img class="logo_img" src="<?= \common\services\DomainExtraConfigService::getVal('logoPath');?>" alt="<?= \common\services\DomainExtraConfigService::getVal('name');?>"></p><br /><br />
                <p class="meta-p">账号注册<a href="/login" style="color:#409EFF;float:right">立即登录</a></p>
               
                <el-divider></el-divider>
                <el-form ref="loginForm" :model="loginForm" label-width="120px" id="loginForm" @keyup.native="checkForm('loginForm')" >
                    <el-form-item label="手机号码" prop="phone" :rules="[{required: true, message: '手机号码不能为空'}]">
                        <el-input @keyup.native="checkPhone()" class="f-input" style="width:64%" prefix-icon="el-icon-user" v-model="loginForm.phone" placeholder="请输入手机号码"></el-input>
                        <el-button type="primary" size="medium" class="sendBtn" :disabled="sendBtnDisabled" @click="sendSms();">点击获取验证码</el-button>
                    </el-form-item>
                    <el-form-item label="短信验证码" prop="code" :rules="[{required: true, message: '短信验证码不能为空'}]">
                        <el-input class="f-input" prefix-icon="el-icon-message" :disabled="smsDisabled" v-model="loginForm.code" placeholder="请输入短信验证码"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="username" :rules="[{required: true, message: '姓名不能为空'}]">
                        <el-input class="f-input" prefix-icon="el-icon-user"  v-model="loginForm.username" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="设定密码" prop="password" :rules="[{required: true, message: '密码不能为空'}]">
                        <el-input class="f-input" prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="请输入密码" autocomplete="off" auto-complete="new-password"></el-input>
                        <input type="text" style="display:none;">
                    </el-form-item>
                    <el-form-item label="重复密码" prop="password2" :rules="[{required: true, message: '重复密码不能为空'}]">
                        <el-input class="f-input" prefix-icon="el-icon-lock" type="password" v-model="loginForm.password2" placeholder="请输入密码" autocomplete="off" auto-complete="new-password"></el-input>
                    </el-form-item>
                    <el-form-item label="授权码" prop="auth_code" :rules="[{required: true, message: '授权码不能为空'}]">
                        <el-input class="f-input" prefix-icon="el-icon-lock" type="text" v-model="loginForm.auth_code" placeholder="请输入授权码" autocomplete="off"></el-input>
                        <el-alert
                            title="授权码请联系客服获取"
                            type="info">
                        </el-alert>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')" :disabled="loginBtnDisabled" id="regBtn">注册新用户</el-button>
                    </el-form-item>

                </el-form>
            </el-main>
        </el-container>
    </template>

    <!--显示输入验证码---->
    <el-dialog :visible.sync="verifyDialog" :close-on-click-modal="false">
        <h3 slot="title">请输入图形验证码</h3>
        <el-input placeholder="请输入验证码" v-model="verifyCode">
            <template slot="prepend">
                <img @click="refresh" :src="captcha" class="cursor" title="点击刷新验证码">
            </template>
        </el-input>
        <div slot="footer" class="dialog-footer">
            <el-button @click="verifyDialog = false">取 消 </el-button>
            <el-button type="primary" @click="handleVerify">确 定</el-button>
        </div>
    </el-dialog>

</div>
</div>
<?php echo $this->render('../public/footer.php')?>
<style>
    body{  background:url('/static/images/bg-01.jpg');
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;}
    #regBtn{
        width: 100%;
    }
    .sendBtn{
        width: 140px;
    }
</style>
<script>
    function isPoneAvailable($poneInput) {
        var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test($poneInput)) {
            return false;
        } else {
            return true;
        }
    }
    new Vue({
        el:'#registerBox',
        data() {
            return {
                loginForm: {
                    phone: '',
                    password: ''
                },
                loginLoading:false,
                sendBtnDisabled:true,
                loginBtnDisabled:true,
                smsDisabled:true,
                verifyDialog:false,
                verifyCode:'',
                captcha : '/api/public/captcha'
            }
        },
        methods: {
            checkPhone(ev){
                if(isPoneAvailable(this.loginForm.phone)){
                    this.sendBtnDisabled = false;
                }
            },
            refresh: function(){
                let that = this
                axios.post('/api/public/captcha?refresh=1')
                    .then(
                        response => {
                            console.log(response)
                            that.captcha = response.data.url
                        })
            },
            checkForm(form){
                let that = this;
                if(that.loginForm.phone!='' && that.loginForm.code!='' && that.loginForm.password!='' && that.loginForm.password2!=''){
                    this.$refs[form].validate((valid) => {
                        that.loginBtnDisabled = valid ? false : true;
                    });
                }
            },
            sendSms(){
                this.verifyDialog = true
            },
            handleVerify(){
                let that = this
                if(that.verifyCode == ''){
                    this.$message({
                        type: 'error',
                        message: '请填写图形验证码'
                    });
                }
                // 执行发短信操作
                that.loginLoading = true;
                axios.post('/api/public/sms',{
                    phone : that.loginForm.phone,
                    verify: that.verifyCode
                })
                    .then(
                        response => {
                            that.loginLoading = false;
                            if(response.data.status == 'success') {
                                that.$message({
                                    type: 'success',
                                    message: '短信已经发送~请注意查收~'
                                });
                                that.sendBtnDisabled = true;
                                that.smsDisabled = false;
                                that.verifyDialog = false
                            }else{
                                that.$message({
                                    type: 'info',
                                    message: '短信发送失败.' + response.data.error_message
                                });
                                that.refresh()
                            }
                        }
                    )

                console.log('handleVerify')
            },
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.loginLoading = true
                        axios
                            .post('/api/public/register',{
                                mobile : this.loginForm.phone,
                                password : this.loginForm.password,
                                password2 : this.loginForm.password2,
                                code : this.loginForm.code,
                                username:this.loginForm.username,
                                auth_code:this.loginForm.auth_code,
                                autologin:1,
                            })
                            .then(
                                response => {
                                    console.log(response);
                                    let result = response.data
                                    if(result.error_code!=0){
                                        this.$message({
                                            type: 'info',
                                            message: result.error_message
                                        });
                                        this.loginLoading = false
                                        return false
                                    }else {
                                        this.$message({
                                            type: 'success',
                                            message: '注册成功~即将跳转到账套首页'
                                        });
                                        localStorage.setItem('loginToken',result.data.token);
                                        setTimeout(function () {
                                            window.location.href='/tally';
                                        },500)
                                    }
                                }
                            )
                            .catch(function (error) { // 请求失败处理
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(form) {
                this.$refs[form].resetFields();
            }
        }
    })
</script>
</body>
</html>
